<template>
    <view class="recipe-list" :class="{ 'light-theme': isLightTheme }">
        <template v-if="recipes.length > 0">
            <view v-for="recipe in recipes" :key="recipe.name" class="recipe-tag" @click="viewRecipe(recipe)">
                <view class="recipe-icons">
                    <image v-for="(icon, index) in getRecipeIcon(recipe)" :key="index" :src="icon"
                        class="image-icon-small image-icon-small-end" mode="aspectFill"></image>
                </view>
                <text>{{ recipe.name }}</text>
            </view>
        </template>
        <template v-else>
            <view class="empty-recipe-message">
                <image src="/static/images/meiyougengduole.png" class="image-icon-more" mode="aspectFill"></image>
                <text>没有找到合适的菜谱；等我慢慢更新让您能吃上可口的饭菜，对不起宝贝，答应我一定要好好吃饭，千万、千万、千万不能吃垃圾食品哦～</text>
            </view>
        </template>
    </view>
</template>

<script setup>
import foodIcons from '/types/foodIcons.json';

// 接收props
const props = defineProps({
    recipes: {
        type: Array,
        default: () => []
    },
    isLightTheme: {
        type: Boolean,
        default: false
    }
});

// 定义emits
const emit = defineEmits(['view-recipe']);

// 获取菜谱图标
function getRecipeIcon(recipe) {
    if (!recipe || !recipe.stuff) {
        return ['/static/images/yz-rougucha.png']; // 返回包含默认图标的数组
    }

    // 分割食材字符串
    const stuffs = recipe.stuff.split(',').map(s => s.trim());

    // 查找所有在foodIcons中存在的食材图标，并限制最多显示3个
    const matchingIcons = stuffs
        .map(stuff => foodIcons[stuff])
        .filter(icon => icon !== undefined)
        .slice(0, 3); // 限制最多3个图标

    // 如果没有找到匹配的食材图标，返回默认图标数组
    return matchingIcons.length > 0 ? matchingIcons : ['/static/images/yz-rougucha.png'];
}

function viewRecipe(recipe) {
  // 将菜谱对象转换为JSON字符串传递给视频播放页面
  const recipeStr = JSON.stringify(recipe);
  
  // 跳转到视频播放页面
  uni.navigateTo({
    url: `/pages/detail/index?recipe=${encodeURIComponent(recipeStr)}`
  });
}
</script>

<style lang="scss">
@import '/pages/index/index.scss';

/* 默认样式 - 黑夜主题 */
.recipe-tag {
  background-color: rgba(255, 255, 255, 0.1); /* 黑夜主题下的半透明白色背景 */
  transition: all 0.3s ease; /* 添加所有属性的过渡效果 */
}

.recipe-tag text {
  color: #fff; /* 黑夜主题下的白色文字 */
  transition: color 0.3s ease;
}

/* 空状态消息的默认样式 - 黑夜主题 */
.empty-recipe-message text {
  color: #aaa; /* 黑夜主题下的文字颜色 */
  transition: color 0.3s ease;
}

/* 白天主题下的样式覆盖 */
.light-theme .recipe-tag {
  background-color: rgba(0, 0, 0, 0.05); /* 白天主题下的淡灰色背景 */
}

.light-theme .recipe-tag text {
  color: #333; /* 白天主题下的深色文字 */
}

.light-theme .empty-recipe-message text {
  color: #666; /* 白天主题下的文字颜色 */
}
</style>